<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <div id="app">
        <button>button1</button>
        <button>button2</button>
        <button>button3</button>
        <button>button4</button>
        <button>button5</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: "你好",
            }
        })


        var btns = document.getElementsByTagName("button")
            //let 有块级作用域，var全局
            // for (let i = 0; i < btns.length; i++) {
            //   btns[i].addEventListener("click", function () {
            //     console.log("第" + i + "个按钮被调用了")
            //   })
            // }
            // 为什么闭包可以解决问题： 函数是一个作用域借用function作用域解决问题
        for (let i = 0; i < btns.length; i++) {
            (function(i) {
                btns[i].addEventListener("click", function() {
                    console.log("第" + i + "个按钮被调用了")
                })
            })(i)
        }
        // 闭包作用域概念
        var name = "nki"

        function abc(name) {
            console.log(name)
        }
        abc(name)
        name = "ijiji"
        abc(name)
    </script>
</body>

</html>